<template>
	<view class="coupon">
		<view class="coupon_type">
			{{data.type==0?'满减券':"折扣券"}}
		</view>
		<view class="coupon_info">
			<view class="title_price">
				<view class="title">
					{{data.title}}
				</view>
				<view class="price">
					￥<text>{{data.price}}</text>
				</view>
			</view>
			<view class="time_menkan">
				<view class="time">
					领取时间：{{data.startTime}}至{{data.endTime}}
				</view>
				<view class="menkan">
					满{{data.menkan}}可用
				</view>
			</view>
		</view>
		<view class="caozuo">
			<view class="btn" @click="LingQu">
				立即领取
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					{}
				}
			}
		},
		methods:{
			LingQu(){
				console.log("我领取了")
			}
		}
	}
</script>

<style lang="scss">
	.coupon {
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.coupon_type {
		padding: 6rpx 20rpx;
		width: 13%;
		color: #fff;
		border-bottom-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		background: linear-gradient(to right, #fc4a1a, #f7b733);
	}

	.coupon_info {
		position: relative;
		padding: 20rpx 20rpx 0;

		.title_price {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 36rpx;
				font-weight: 700;
			}

			.price {
				color: #ff0000;

				text {
					font-size: 70rpx;
				}
			}
		}

		.time_menkan {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0 20rpx;


			.time {
				color: #818181;
				font-size: 26rpx;
				font-weight: 700;
			}

			.menkan {
				color: #6c6c6c;
				font-size: 26rpx;
			}
		}
	}

	.coupon_info::after {
		content: "";
		border-bottom: 2rpx dashed #ccc;
		display: block;
		width: 100%;
	}

	.caozuo {
		display: flex;
		justify-content: flex-end;
		padding: 22rpx 16rpx;

		.btn {
			padding: 12rpx 20rpx;
			color: #fff;
			border-radius: 30rpx;
			font-size: 30rpx;
			background: linear-gradient(to right, #fc4a1a, #f7b733);
		}
	}
</style>